<template>
  <div class="container">
    <div class="alertBox">
      <div class="const">
        <h1>
          提交成功
        </h1>
        <img src="../../../static/img/buyCar/details/btn_close.png" alt="" @click="isHide">
        <div class="tex">
          <p>稍后将有客户经理与您电话沟通 ,</p>
          <p>请注意保持通讯畅通。</p>
          <div class="Btn" @click="isHide">
            知道了
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="forms_box">
        <div class="froms">
          <h1>我要卖车</h1>
          <ul>
            <li>
              <div>
                <span>*</span>
                您的姓名
              </div>
              <input type="text" maxlength="7" placeholder="请输入" v-model="params.name">
            </li>
            <p class="isNameErr"></p>
            <li>
              <div>
                <span>*</span>
                联系电话
              </div>
              <input type="text" maxlength="11" placeholder="请输入" v-model="params.telephone">
            </li>
            <p class="isTelErr"></p>
            <li>
              <div>
                <span>*</span>
                联系地址
              </div>
              <input type="text" maxlength="30" placeholder="请输入" v-model="params.address">
            </li>
            <p class="isAddressErr"></p>
            <li>
              <div>
                <span>*</span>
                品牌车型
              </div>
              <input type="text" maxlength="24" placeholder="请输入" v-model="params.carMessage">
            </li>
            <p class="isCarMessageErr"></p>
            <li>
              <div>
                <span>*</span>
                车牌号码
              </div>
              <input type="text" maxlength="8" placeholder="请输入" v-model="params.plateNumber">
            </li>
            <p class="isNumberPlatesErr"></p>
            <li>
              <div>
                <span>*</span>
                是否一手车
              </div>
              <el-select v-model="params.oneHand" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </li>
            <p class="isHanErr"></p>
            <li>
              <div>
                <span>*</span>
                购车时间
              </div>
              <!-- <span class="el-input__suffix">
                <span class="el-input__suffix-inner">
                  <i class="el-select__caret el-input__icon el-icon-arrow-up"></i>
                </span>
              </span> -->
              <i class = 'el-icon-arrow-down iconWSK isIcon' @click="fn"></i>
              <el-date-picker
                v-model="params.purchaseDate"
                type="date"
                placeholder="请选择"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions0"
                :editable="false"
                prefix-icon='el-icon-date'
                @focus="isIcons(0)"
                @blur="isIcons1(0)">
              </el-date-picker>
            </li>
            <p class="isPurErr"></p>
            <li>
              <div>
                <span>*</span>
                上牌时间
              </div>
              <i class = 'el-icon-arrow-down iconWSK isIcon' @click="fn1"></i>
              <el-date-picker
                v-model="params.licenseDate"
                type="date"
                placeholder="请选择"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions0"
                :editable="false"
                @focus="isIcons(1)"
                @blur="isIcons1(1)">
              </el-date-picker>
            </li>
            <p class="isLicErr"></p>
            <li>
              <div>
                <span>*</span>
                行驶里程
              </div>
              <input type="text" placeholder="请输入" v-model="isMileage" @change="mileageChenge($event)">
              <span class="down1">
                万公里
              </span>
            </li>
            <p class="isMilErr"></p>
          </ul>
          <div class="btn" @click="Submission">
            立即提交
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      pickerOptions0: {
        // eslint-disable-next-line
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6
        }
      },
      options: [
        {
          value: '1',
          label: '是'
        },
        {
          value: '0',
          label: '否'
        }
      ],
      isMileage: '',
      params: {
        name: '',
        telephone: '',
        address: '',
        carMessage: '',
        plateNumber: '',
        oneHand: '',
        purchaseDate: '',
        licenseDate: '',
        mileage: '',
        userId: ''
      },
      focus1: true,
      focus2: true,
      isActiveelement: {},
      focTag: ''
    }
  },
  created () {
    window.scrollTo(0, 0)
    // 获取当前URL
    let urls = window.location.href
    // 读取本地
    let storage = window.sessionStorage
    let json = storage.getItem('WSKuserLis')
    let jsonObj = JSON.parse(json)
    if (jsonObj) {
      this.params.userId = jsonObj.data.data.user.id
    } else if (!this.params.userId) {
      let _this = this
      _this.$router.push({path: '/login/login'})
      let use = JSON.stringify(urls)
      let storage = window.sessionStorage
      storage.setItem('WSKpathHerf', use)
    } else {
      let storage = window.sessionStorage
      storage.setItem('WSKpathHerf', '')
    }
  },
  mounted () {
    let _this = this
    $('.el-input__inner').eq(1).on('click', function () {
      _this.focus1 = false
      $('.available').on('click', function () {
        _this.focus1 = true
      })
      $('.prev-month').on('click', function () {
        _this.focus1 = true
      })
      $('.next-month').on('click', function () {
        _this.focus1 = true
      })
    })
    $('.el-input__inner').eq(2).on('click', function () {
      _this.focus2 = false
      $('.available').on('click', function () {
        _this.focus2 = true
      })
      $('.prev-month').on('click', function () {
        _this.focus2 = true
      })
      $('.next-month').on('click', function () {
        _this.focus2 = true
      })
    })
    setInterval(function () {
      if (document.activeElement) {
        if (document.activeElement.tagName === null || document.activeElement.tagName) {
          _this.focTag = document.activeElement.tagName
        }
      }
    }, 500)
  },
  methods: {
    // 点击向下按钮
    fn () {
      let _this = this
      if (_this.focTag === 'BODY') {
        _this.focus1 = true
      }
      if (_this.focus1) {
        $('.el-input__inner')[1].focus()
      }
      _this.focus1 = !_this.focus1
      setTimeout(function () {
        $('.available').on('click', function () {
          _this.focus1 = true
        })
        $('.prev-month').on('click', function () {
          _this.focus1 = true
        })
        $('.next-month').on('click', function () {
          _this.focus1 = true
        })
      }, 10)
    },
    fn1 () {
      let _this = this
      if (_this.focTag === 'BODY') {
        _this.focus2 = true
      }
      if (_this.focus2) {
        $('.el-input__inner')[2].focus()
      }
      _this.focus2 = !_this.focus2
      setTimeout(function () {
        $('.available').on('click', function () {
          _this.focus2 = true
        })
        $('.prev-month').on('click', function () {
          _this.focus2 = true
        })
        $('.next-month').on('click', function () {
          _this.focus2 = true
        })
      }, 10)
    },
    // 行驶里程
    mileageChenge (x) {
      // let patrn = /^\d+(\.\d+)?$/
      let patrn = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/
      if (this.isMileage.length > 4) {
        this.isMileage = this.isMileage.substring(0, 4)
      }
      if (this.isMileage > 9.99) {
        this.isMileage = 9.99
        $('.isMilErr').text('最大为9.99万公里')
      }
      if (this.isMileage < 9.99) {
        $('.isMilErr').text('')
      }
      if (patrn.test(this.isMileage) === false) {
        this.isMileage = ''
        $('.isMilErr').text('请输入0-9.99之间的数字')
      }
    },
    // 箭头
    isIcons (x) {
      $('.isIcon')[x].classList.add('isIcon1')
    },
    isIcons1 (x) {
      $('.isIcon')[x].classList.remove('isIcon1')
    },
    // 提价按钮
    Submission () {
      // 验证输入的合法性
      let Verification = /^1(3|4|5|7|8)\d{9}$/
      if (this.params.name === '' || !this.params.name) {
        $('.isNameErr').text('请输入您的姓名')
        return ''
      }
      $('.isNameErr').text('')
      if (this.params.telephone === '' || !this.params.telephone) {
        $('.isTelErr').text('请输入联系电话')
        return ''
      } else if (Verification.test(this.params.telephone) === false) {
        $('.isTelErr').text('请输入有效联系电话')
        return ''
      }
      $('.isTelErr').text('')
      if (this.params.address === '' || !this.params.address) {
        $('.isAddressErr').text('请输入联系地址')
        return ''
      }
      $('.isAddressErr').text('')
      if (this.params.carMessage === '' || !this.params.carMessage) {
        $('.isCarMessageErr').text('请输入品牌车型')
        return ''
      }
      $('.isCarMessageErr').text('')
      if (this.params.plateNumber === '' || !this.params.plateNumber) {
        $('.isNumberPlatesErr').text('请输入车牌号码')
        return ''
      }
      $('.isNumberPlatesErr').text('')
      if (this.params.oneHand === '') {
        $('.isHanErr').text('请选择是否是二手')
        return ''
      }
      $('.isHanErr').text('')
      if (this.params.purchaseDate === '') {
        $('.isPurErr').text('请选择购车时间')
        return ''
      }
      $('.isPurErr').text('')
      if (this.params.licenseDate === '') {
        $('.isLicErr').text('请选择上牌时间')
        return ''
      }
      $('.isLicErr').text('')
      if (this.isMileage === '') {
        $('.isMilErr').text('请输入行驶里程')
        return ''
      }
      $('.isMilErr').text('')
      this.params.mileage = this.isMileage * 10000
      this.$http({
        url: 'http://paimai.ucarcloud.cn/auctionCarCore/applyOrder/submitOrder',
        params: this.params,
        headers: {'from': 'web'}
      }).then(r => {
        if (r.data.state !== 'SUCCESS') {
          switch (r.data.message) {
            case '姓名必须为2-7个汉字。':
              $('.isNameErr').text(r.data.message)
              break
            default:
              break
          }
        }
        if (r.data.state === 'SUCCESS' && r.data.message === '操作成功') {
          this.isShow()
        }
      })
    },
    // 弹窗显示
    isShow () {
      $('.alertBox').show()
    },
    // 弹窗隐藏
    isHide () {
      $('.alertBox').hide()
      this.params = {
        name: '',
        telephone: '',
        address: '',
        carMessage: '',
        plateNumber: '',
        oneHand: '',
        purchaseDate: '',
        licenseDate: '',
        mileage: '',
        userId: ''
      }
      this.isMileage = ''
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
  width: 100%;
  height: 822px;
  position: relative;
  background: url("../../../static/img/sellingCar/sale_banner.png");
  .isIcon{
    -webkit-transition: -webkit-transform 0.2s ease-out;
    -moz-transition: -moz-transform 0.2s ease-out;
    -o-transition: -o-transform 0.2s ease-out;
    -ms-transition: -ms-transform 0.2s ease-out;
  }
  .isIcon1 {
      -webkit-transform: rotateZ(-180deg);
      -moz-transform: rotateZ(-180deg);
      -o-transform: rotateZ(-180deg);
      -ms-transform: rotateZ(-180deg);
      transform: rotateZ(-180deg);
  }
  .iconWSK{
    position: absolute;
    z-index: 1;
    color: #c0c4cc;
    right: 17px;
    top: 2px;
    cursor: pointer;
    width: 30px;
    text-align: center;
    line-height: 35px;
    height: 35px;
  }
  .alertBox{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    position: fixed;
    z-index: 1100;
    margin-top: -71px;
    .const{
      width: 460px;
      height: 200px;
      background: #fff;
      position: absolute;
      border-radius: 5px;
      top: 50%;
      left: 50%;
      margin: -100px 0 0 -230px;
      h1{
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #ff6f3c;
        font-size: 16px;
        border-bottom: 1px solid #e3e3e3;
      }
      img{
        position: absolute;
        top: 15px;
        right: 20px;
        cursor: pointer;
        width: 12px;
      }
      .tex{
        margin-top: 30px;
        p{
          font-size: 14px;
          color: #333;
          text-align: center;
          padding-bottom: 12px;
        }
        .Btn{
          width: 100px;
          height: 34px;
          line-height: 34px;
          text-align: center;
          margin: 12px auto 30px;
          background: #fafafa;
          border: 1px solid #e3e3e3;
          cursor: pointer;
        }
      }
    }
  }
  .content{
    width: 1200px;
    height: 822px;
    margin: 0 auto;
    .forms_box{
      width: 642px;
      height: 704px;
      background: rgba(255, 255, 255, 0.25);
      float: right;
      margin-top: 65px;
      margin-bottom: 53px;
      .froms{
        width: 610px;
        height: 672px;
        background: #fff;
        margin: 16px;
        &>h1{
          text-align: center;
          color: #ff6f3c;
          font-size: 20px;
          font-weight: bold;
          padding: 30px 0;
        }
        ul{
          padding: 0 40px;
          &>p{
            height: 16px;
            line-height: 16px;
            // background: red;
            color: #ff6f3c;
            width: 424px;
            padding-left: 10px;
            margin-left: 94px;
          }
          li{
            overflow: hidden;
            height: 36px;
            line-height: 36px;
            position: relative;
            div{
              font-size: 14px;
              width: 94px;
              float: left;
              span{
                line-height: 41px;
                float: left;
                display: inline-block;
                height: 36px;
                margin-right: 5px;
                color: #ff6f3c;
              }
            }
            input{
              float: right;
              width: 424px;
              height: 34px;
              // line-height: 34px;
              border: 1px solid #e3e3e3;
              padding-left: 10px;
              font-size: 14px;
              color: #333;
              &:focus {
                  border-color: #ff6f3c;
              }
            }
            .isUsed{
              cursor: pointer;
            }
            .el-date-editor.el-input,.el-select{
              width: 436px;
              height: 36px;
              border-radius: 0;
            }
            .down{
              position: absolute;
              display: inline-block;
              right: 20px;
              width: 20px;
              height: 100%;
              line-height: 34px;
            }
            .down1{
              position: absolute;
              display: inline-block;
              right: 20px;
              height: 100%;
              line-height: 36px;
            }
          }
        }
        .btn{
          width: 240px;
          height: 60px;
          line-height: 60px;
          background: #ff6f3c;
          margin: 34px auto 30px;
          font-size: 18px;
          text-align: center;
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
